<template>
  <div class="RobotInformation_Box">
    <div class="RobotInformation_titleBox">
      <div class="titleBox1_l">
        <div class="Title_icon"></div>
        <span class="public_Text">任务信息</span>
      </div>
      <div class="titleBox1_r" @click="addClose"></div>
    </div>
    <div class="RobotInformation_contentBox">

      <div class="RobotInformation_item">
        <div class="RobotInformation_itemL">
          <div class="RobotInformation_itemLIcon2"></div>
          <span class="spanName">任务ID</span>
        </div>
        <div class="RobotInformation_itemR">{{shijvList.task_id}}</div>
      </div>
      <div class="RobotInformation_item">
        <div class="RobotInformation_itemL">
          <div class="RobotInformation_itemLIcon3"></div>
          <span class="spanName">创建时间</span>
        </div>
        <div class="RobotInformation_itemR">{{shijvList.create_time}}</div>
      </div>
      <div class="RobotInformation_item">
        <div class="RobotInformation_itemL">
          <div class="RobotInformation_itemLIcon4"></div>
          <span class="spanName">创建人</span>
        </div>
        <div class="RobotInformation_itemR">xxx</div>
      </div>
      <div class="RobotInformation_item">
        <div class="RobotInformation_itemL1">
          <div class="RobotInformation_itemLIcon5"></div>
          <span class="spanName">任务开始执行时间</span>
        </div>
        <div class="RobotInformation_itemR1">xxxxx</div>
      </div>
      <div class="RobotInformation_item">
        <div class="RobotInformation_itemL">
          <div class="RobotInformation_itemLIcon6"></div>
          <span class="spanName">配送类型</span>
        </div>
        <div class="RobotInformation_itemR">xxxxx</div>
      </div>
      <div class="RobotInformation_item">
        <div class="RobotInformation_itemL">
          <div class="RobotInformation_itemLIcon8"></div>
          <span class="spanName">目的地</span>
        </div>
        <div class="RobotInformation_itemR">{{shijvList.point_name}}</div>
      </div>

      <div class="RobotInformation_item">
        <div class="RobotInformation_itemL1">
          <div class="RobotInformation_itemLIcon15"></div>
          <span class="spanName">完成时间</span>
        </div>
        <div class="RobotInformation_itemR1">{{shijvList.update_time}}</div>
      </div>
      <!-- <div class="RobotInformation_item">
        <div class="RobotInformation_itemL">
          <div class="RobotInformation_itemLIcon1"></div>
          <span class="spanName">任务名称</span>
        </div>
        <div class="RobotInformation_itemR">药品配送-20521554564465</div>
      </div> -->
      <!-- <div class="RobotInformation_item">
        <div class="RobotInformation_itemL">
          <div class="RobotInformation_itemLIcon9"></div>
          <span class="spanName">预设路线</span>
        </div>
        <div class="RobotInformation_itemR">A去走量-7层#1电梯-撒科技活动</div>
      </div> -->
      <!-- <div class="RobotInformation_item">
        <div class="RobotInformation_itemL1">
          <div class="RobotInformation_itemLIcon10"></div>
          <span class="spanName">预计送达时间</span>
        </div>
        <div class="RobotInformation_itemR1">05:44:66</div>
      </div> -->
      <!-- <div class="RobotInformation_item">
        <div class="RobotInformation_itemL">
          <div class="RobotInformation_itemLIcon11"></div>
          <span class="spanName">签收人</span>
        </div>
        <div class="RobotInformation_itemR">张院士</div>
      </div>
      <div class="RobotInformation_item">
        <div class="RobotInformation_itemL">
          <div class="RobotInformation_itemLIcon12"></div>
          <span class="spanName">签收状态</span>
        </div>
        <div class="RobotInformation_itemR">已签收</div>
      </div>
      <div class="RobotInformation_item">
        <div class="RobotInformation_itemL">
          <div class="RobotInformation_itemLIcon13"></div>
          <span class="spanName">签收时间</span>
        </div>
        <div class="RobotInformation_itemR">00:00:00</div>
      </div>
      <div class="RobotInformation_item">
        <div class="RobotInformation_itemL1">
          <div class="RobotInformation_itemLIcon14"></div>
          <span class="spanName">是否返回物资笼</span>
        </div>
        <div class="RobotInformation_itemR1">是</div>
      </div> -->
    </div>
  </div>
</template>
<script setup>
  import { ref } from "vue"
  import { postdatacenterdbapiapi } from "@/api/index.js"

  const emit = defineEmits(["clsoeRobotInformation"])
  const addClose = () => {
    emit("clsoeRobotInformation")
  }
  const props = defineProps({
    jiqirenObj: {
      type: Object,
      default: true
    }
  })
  const shijvList = ref([])
  const init = async (data) => {
    console.log(data.DevicesId, '机器人');
    let tijiaoList = {
      apiid: "order_info",
      token: "a45ri8",
      appid: "数字孪生Pad",
      apptype: "trans",
      sn: data.DevicesId
    }
    const res = await postdatacenterdbapiapi(tijiaoList)
    // console.log(JSON.parse(res.data.data)[0].order_id
    //   , '机器人任务列表id');
    let zhanshiObj = {
      apiid: "robot_task",
      token: "a45ri8",
      appid: "数字孪生Pad",
      apptype: "trans",
      order_id: JSON.parse(res.data.data)[0].order_id
    }
    const res1 = await postdatacenterdbapiapi(zhanshiObj)
    console.log(JSON.parse(res1.data.data)[0], '机器人任务详情');
    shijvList.value = JSON.parse(res1.data.data)[0]

  }
  watch(
    () => props.jiqirenObj,
    (val) => {
      console.log(val, "监听到了机器人的变化")
      init(val)
    },
    {
      deep: true,
      immediate: true
    }
  )
</script>
<style scoped lang="less">
  .RobotInformation_Box {
    width: 100%;
    height: 100%;
    background: url("@/assets/accessControl/changbeijing.png") no-repeat center;
    background-size: 100% 100%;

    .RobotInformation_titleBox {
      width: 808px;
      height: 60px;
      position: absolute;
      left: 50%;
      top: 20px;
      transform: translate(-50%, 0);
      display: flex;
      align-items: center;
      justify-content: space-between;

      .titleBox1_l {
        width: 600px;
        height: 60px;
        display: flex;
        align-items: center;

        .Title_icon {
          margin-left: 20px;
          width: 50px;
          height: 50px;
          background: url("@/assets/RobotInformation/duigou.png") no-repeat center;
          background-size: 100% 100%;
        }

        span {
          margin-left: 20px;
        }
      }

      .titleBox1_r {
        cursor: pointer;
        width: 80px;
        height: 80px;
        background: url("@/assets/PatientInformation/xhao.png") no-repeat center;
        background-size: 100% 100%;
      }
    }

    .RobotInformation_contentBox {
      width: 808px;
      height: 1300px;
      position: absolute;
      left: 50%;
      top: 120px;
      transform: translate(-50%, 0);
      /* display: flex; */
      /* flex-wrap: wrap; */
      /* align-items: center; */
      /* justify-content: space-between; */

      .RobotInformation_item {
        margin-top: 30px;
        width: 100%;
        height: 76px;
        padding: 10px 32px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border-radius: 20px;
        background: linear-gradient(180deg,
            rgba(225, 242, 255, 0.3) 0%,
            rgba(158, 213, 255, 0.3) 100%);

        .RobotInformation_itemLIcon1 {
          width: 56px;
          height: 56px;
          background: url("@/assets/RobotInformation/renwumc.png") no-repeat center;
          background-size: 100% 100%;
        }

        .RobotInformation_itemLIcon2 {
          width: 56px;
          height: 56px;
          background: url("@/assets/RobotInformation/renwuid.png") no-repeat center;
          background-size: 100% 100%;
        }

        .RobotInformation_itemLIcon3 {
          width: 56px;
          height: 56px;
          background: url("@/assets/RobotInformation/shijian.png") no-repeat center;
          background-size: 100% 100%;
        }

        .RobotInformation_itemLIcon4 {
          width: 56px;
          height: 56px;
          background: url("@/assets/RobotInformation/chuangjianren.png") no-repeat center;
          background-size: 100% 100%;
        }

        .RobotInformation_itemLIcon6 {
          width: 56px;
          height: 56px;
          background: url("@/assets/RobotInformation/wuzileixing.png") no-repeat center;
          background-size: 100% 100%;
        }

        .RobotInformation_itemLIcon7 {
          width: 56px;
          height: 56px;
          background: url("@/assets/RobotInformation/shuliang.png") no-repeat center;
          background-size: 100% 100%;
        }

        .RobotInformation_itemLIcon8 {
          width: 56px;
          height: 56px;
          background: url("@/assets/RobotInformation/mudidi.png") no-repeat center;
          background-size: 100% 100%;
        }

        .RobotInformation_itemLIcon9 {
          width: 56px;
          height: 56px;
          background: url("@/assets/RobotInformation/yvshe.png") no-repeat center;
          background-size: 100% 100%;
        }

        .RobotInformation_itemLIcon10 {
          width: 56px;
          height: 56px;
          background: url("@/assets/RobotInformation/songda.png") no-repeat center;
          background-size: 100% 100%;
        }

        .RobotInformation_itemLIcon5 {
          width: 56px;
          height: 56px;
          background: url("@/assets/RobotInformation/kaishiTime.png") no-repeat center;
          background-size: 100% 100%;
        }

        .RobotInformation_itemLIcon11 {
          width: 56px;
          height: 56px;
          background: url("@/assets/RobotInformation/qianshou.png") no-repeat center;
          background-size: 100% 100%;
        }

        .RobotInformation_itemLIcon12 {
          width: 56px;
          height: 56px;
          background: url("@/assets/RobotInformation/zhuangtai.png") no-repeat center;
          background-size: 100% 100%;
        }

        .RobotInformation_itemLIcon13 {
          width: 56px;
          height: 56px;
          background: url("@/assets/RobotInformation/shijian.png") no-repeat center;
          background-size: 100% 100%;
        }

        .RobotInformation_itemLIcon14 {
          width: 56px;
          height: 56px;
          background: url("@/assets/RobotInformation/wuzilong.png") no-repeat center;
          background-size: 100% 100%;
        }

        .RobotInformation_itemLIcon15 {
          width: 56px;
          height: 56px;
          background: url("@/assets/RobotInformation/shijian.png") no-repeat center;
          background-size: 100% 100%;
        }

        .RobotInformation_itemL1 {
          width: 50%;
          height: 100%;
          line-height: 56px;
          display: flex;
          align-items: center;

          .spanName {
            margin-left: 20px;
            color: #000;
            font-family: "PingFang SC";
            font-size: 30px;
            font-style: normal;
            font-weight: 400;
          }
        }

        .RobotInformation_itemR1 {
          width: 50%;
          height: 100%;
          text-align: right;
          line-height: 56px;
          color: #000;
          font-family: "PingFang SC";
          font-size: 30px;
          font-style: normal;
          font-weight: 400;
        }

        .RobotInformation_itemL {
          width: 30%;
          height: 100%;
          line-height: 56px;
          display: flex;
          align-items: center;

          .spanName {
            margin-left: 20px;
            color: #000;
            font-family: "PingFang SC";
            font-size: 30px;
            font-style: normal;
            font-weight: 400;
          }
        }

        .RobotInformation_itemR {
          width: 70%;
          height: 100%;
          text-align: right;
          line-height: 56px;
          color: #000;
          font-family: "PingFang SC";
          font-size: 30px;
          font-style: normal;
          font-weight: 400;
        }
      }
    }
  }
</style>